<template>
  <div class="pd-20">
    <el-input v-model="searchCondition"
              placeholder="请输入商品名称"
              class="w-200"
              clearable
              @clear="query" />
    <el-button type="primary"
               @click="query">查 询</el-button>
    <el-button type="primary"
               @click="edit(null)">新 增</el-button>
    <el-table stripe
              :data="dataList"
              style="width: 100%"
              border
              class="mt-20">
      <el-table-column align="center"
                       label="图标"
                       width="120px">
        <template slot-scope="scope">
          <el-image :src="scope.row.imageUrl"
                    :preview-src-list="[scope.row.imageUrl]"
                    style="width:80px; height:80px;"></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="name"
                       label="商品名称"
                       min-width="100">
      </el-table-column>
      <el-table-column align="center"
                       prop="brandName"
                       label="品牌名称"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="goodsNum"
                       label="商品数量"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="priceRange"
                       label="价格区间"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="majorStatus"
                       label="推荐状态"
                       min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.majorStatus == null || scope.row.majorStatus == 0">
            未推荐
          </span>
          <span v-if="scope.row.majorStatus != null && scope.row.majorStatus == 1">
            已推荐
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="sortNum"
                       label="排序号"
                       min-width="120">
      </el-table-column>

      <el-table-column align="center"
                       prop="createTime"
                       label="录入时间"
                       min-width="120"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column label="操作"
                       width="300px"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="primary"
                     @click="edit(scope.row)">编 辑
          </el-button>
          <el-button size="mini"
                     type="info"
                     @click="editParameter(scope.row.id)">详 情
          </el-button>
          <el-button size="mini"
                     type="warning"
                     @click="editItem(scope.row.id)">规 格
          </el-button>
          <el-button size="mini"
                     type="danger"
                     @click="deleteData(scope.row.id)">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="initTable"
          :pageTotal="totals"
          ref="page"></page>
    <div>
      <el-dialog title="编辑商品"
                 width="60%"
                 :close-on-click-modal="false"
                 :visible.sync="dialogFormVisible">
        <el-form :model="goodsObj">
          <el-form-item :label-width="formLabelWidth"
                        label="图标">
            <el-upload class="avatar-uploader"
                       :action="imageUploadUrl"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess1"
                       :before-upload="beforeAvatarUpload">
              <img v-if="goodsObj.imageUrl"
                   :src="goodsObj.imageUrl"
                   width="200px"
                   height="100px"
                   class="avatar">
              <i v-else
                 class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="图标列表">
            <el-upload class="avatar-uploader"
                       :action="imageUploadUrl"
                       list-type="picture-card"
                       :on-remove="handleRemove1"
                       :on-change="handleChange"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload"
                       :file-list="imageList"
                       :class="{hide: hideUpload }">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="goodsObj.dialogVisible">
              <img :src="goodsObj.headPortrait"
                   alt=""
                   width="100px"
                   height="100px" />
            </el-dialog>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="视频介绍">
            <el-upload class="avatar-uploader"
                       :action="uploadVideoUrl"
                       :on-progress="uploadVideoProcess"
                       :on-success="uploadSuccess"
                       :before-upload="beforeUploadVideo"
                       :show-file-list="false"
                       :limit="1">
              <video v-if="goodsObj.introduceVideoUrl !='' && !videoFlag"
                     :src="goodsObj.introduceVideoUrl"
                     class="avatar video-avatar"
                     controls="controls">
                您的浏览器不支持视频播放
              </video>
              <i v-else-if="goodsObj.introduceVideoUrl ==='' && !videoFlag"
                 class="el-icon-plus avatar-uploader-icon"></i>
              <el-progress v-if="videoFlag == true"
                           type="circle"
                           :percentage="videoUploadPercent"
                           style="margin-top:7px;"></el-progress>

            </el-upload>
            <p class="Upload_pictures">
              <span></span>
              <span>最多可以上传1个视频，大小不超过100M，推荐格式mp4</span>
            </p>
          </el-form-item>

          <el-form-item :label-width="formLabelWidth"
                        label="商品名称">
            <el-input v-model="goodsObj.name"
                      class="w-200"
                      placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="商品型号">
            <el-input v-model="goodsObj.model"
                      class="w-200"
                      placeholder="请输入商品型号"></el-input>
          </el-form-item>
          <!-- <el-form-item
            :label-width="formLabelWidth"
            label="商品价格">
            <el-input v-model="goodsObj.price"></el-input>
          </el-form-item>
          <el-form-item
            :label-width="formLabelWidth"
            label="商品原价">
            <el-input v-model="goodsObj.originalPrice"></el-input>
          </el-form-item>-->
          <el-form-item :label-width="formLabelWidth"
                        label="商品数量">
            <el-input v-model="goodsObj.goodsNum"
                      class="w-200"
                      placeholder="请输入商品数量"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="厂家">
            <el-select v-model="selectFactoryId"
                       placeholder="请输入厂家名称"
                       filterable
                       remote
                       reserve-keyword
                       :remote-method="initFactoryList"
                       @change="initFactoryBand"
                       :loading="loading">
              <el-option v-for="item in factoryList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="品牌">
            <el-select v-model="goodsObj.brandId"
                       placeholder="请选择品牌">
              <el-option v-for="item in factoryBrandList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="推荐状态">
            <el-select v-model="goodsObj.majorStatus">
              <el-option v-for="item in majorList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label-width="formLabelWidth"
                        label="排序">
            <el-input v-model="goodsObj.sortNum"
                      class="w-200"
                      placeholder="请输入排序"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="推广分成">
            <el-input-number :min="0"
                             :precision="2"
                             :controls="false"
                             v-model="goodsObj.extendFee"
                             type="number"
                             class="w-200"
                             placeholder="请输入推广分成"></el-input-number>
          </el-form-item>
          <el-form-item label="购买服务后，是否填写健康服务号："
                        label-width="240px">
            <el-radio-group v-model="goodsObj.isInvitationCode">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="saveData()">保 存</el-button>
        </div>
      </el-dialog>
      <!-- 商品详情 -->
      <el-dialog title="商品详情"
                 width="60%"
                 :close-on-click-modal="false"
                 :visible.sync="detailFormVisible">
        <el-table :data="goodsDetailList"
                  border
                  style="width: 100%">
          <el-table-column align="center"
                           label="图标"
                           width="120px">
            <template slot-scope="scope">
              <el-image :src="scope.row.viewImage"
                        :preview-src-list="[scope.row.viewImage]"
                        style="width:80px; height:80px;">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="detailName"
                           label="名称"
                           min-width="100">
          </el-table-column>
          <!--<el-table-column
            align="center"
            prop="originPlace"
            label="原产地"
            min-width="120">
          </el-table-column>-->
          <!-- <el-table-column
            align="center"
            prop="priceLevel"
            label="价格区间"
            min-width="120">
          </el-table-column>-->
          <el-table-column align="center"
                           prop="weight"
                           label="重量"
                           width="120">
          </el-table-column>
          <el-table-column align="center"
                           prop="createTime"
                           label="录入时间"
                           width="150"
                           :formatter="formatterDate">
          </el-table-column>
          <el-table-column label="操作"
                           width="180"
                           align="center">
            <template slot-scope="scope">
              <el-button type="primary"
                         size="mini"
                         @click="editDetail(scope.row)">编 辑
              </el-button>
              <el-button type="danger"
                         size="mini"
                         @click="deleteDetail(scope.row.id)">删 除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        配置参数
        <el-form :model="goodsDetail">
          <el-form-item :label-width="formLabelWidth"
                        label="图标">
            <el-upload class="avatar-uploader"
                       :action="imageUploadUrl"
                       list-type="picture-card"
                       :on-remove="handleRemove"
                       :on-change="handleChange"
                       :on-success="detailHandleAvatarSuccess"
                       :before-upload="beforeAvatarUpload"
                       :on-progress="handleChange"
                       :file-list="photoList"
                       :class="{hide: hideUpload }">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="formCustom.dialogVisible">
              <img :src="formCustom.headPortrait"
                   alt=""
                   width="100px"
                   height="100px" />
            </el-dialog>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="名称">
            <el-input v-model="goodsDetail.detailName"
                      placeholder="请输入名称"
                      class="w-200"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="型号">
            <el-input v-model="goodsDetail.code"
                      placeholder="请输入型号"
                      class="w-200"></el-input>
          </el-form-item>

          <el-form-item :label-width="formLabelWidth"
                        label="产地">
            <el-input v-model="goodsDetail.originPlace"
                      placeholder="请输入产地"
                      class="w-200"></el-input>
          </el-form-item>

          <el-form-item :label-width="formLabelWidth"
                        label="重量">
            <el-input v-model="goodsDetail.weight"
                      placeholder="请输入重量"
                      class="w-200"></el-input>
          </el-form-item>

          <!--<el-form-item
            :label-width="formLabelWidth"
            label="价格">
            <el-input v-model="goodsDetail.price"></el-input>
          </el-form-item>

          <el-form-item
            :label-width="formLabelWidth"
            label="原价">
            <el-input v-model="goodsDetail.originalPrice"></el-input>
          </el-form-item>-->
          <el-form-item :label-width="formLabelWidth"
                        label="价格区间">
            <el-input v-model="goodsDetail.priceLevel"
                      placeholder="请输入价格"
                      class="w-200"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="国产/进口">
            <el-select v-model="goodsDetail.isDomestic"
                       placeholder="请选择"
                       class="w-200">
              <el-option v-for="item in domesticList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="包装规格">
            <el-input v-model="goodsDetail.packageStandard"
                      type="textarea"
                      placeholder="请输入包装规格"
                      class="w-200"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="备注">
            <el-input v-model="goodsDetail.remark"
                      type="textarea"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item label="购买服务后，是否填写健康服务号："
                        label-width="240px">
            <el-radio-group v-model="goodsDetail.isInvitationCode">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="其他参数">
            <el-button type="primary"
                       @click="addParameter">新 增</el-button>
            <el-table :data="parameterList"
                      style="width: 100%"
                      class="mt-20"
                      border>
              <el-table-column align="center"
                               prop="name"
                               label="名称"
                               min-width="100">
                <template slot-scope="scope">
                  <el-input placeholder="请输入名称"
                            v-model="scope.row.name"
                            clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center"
                               prop="content"
                               label="内容"
                               min-width="380">
                <template slot-scope="scope">
                  <el-input placeholder="请输入内容"
                            type="textarea"
                            v-model="scope.row.content"
                            style="width: 380px"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作"
                               min-width="60"
                               align="center">
                <template slot-scope="scope">
                  <el-button size="mini"
                             type="danger"
                             @click="deleteParameter(scope.row.id)">删 除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="detailFormVisible = false">关 闭</el-button>
          <el-button @click="saveDetailData">保 存</el-button>
        </div>
      </el-dialog>
      <el-dialog title="商品规格"
                 width="60%"
                 :close-on-click-modal="false"
                 :visible.sync="itemFormVisible">
        <el-table :data="goodsItemlList"
                  border
                  style="width: 100%">
          <el-table-column align="center"
                           label="图标"
                           width="120px">
            <template slot-scope="scope">
              <el-image :src="scope.row.imageUrl"
                        :preview-src-list="[scope.row.imageUrl]"
                        style="width:80px;height:80px;">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="name"
                           label="名称">
          </el-table-column>
          <el-table-column align="center"
                           prop="price"
                           label="价格"
                           width="100">
          </el-table-column>
          <el-table-column align="center"
                           prop="originalPrice"
                           label="原价"
                           width="100">
          </el-table-column>
          <el-table-column align="center"
                           prop="goodsNum"
                           label="商品数量"
                           width="100">
          </el-table-column>
          <el-table-column align="center"
                           prop="sortNum"
                           label="排序号"
                           width="80">
          </el-table-column>
          <el-table-column align="center"
                           prop="createTime"
                           label="录入时间"
                           width="150"
                           :formatter="formatterDate">
          </el-table-column>
          <el-table-column label="操作"
                           width="160"
                           align="center">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="primary"
                         @click="editItemDetail(scope.row)">编 辑
              </el-button>
              <el-button size="mini"
                         type="danger"
                         @click="deleteItemDetail(scope.row.id)">删 除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        配置规格
        <el-form :model="editItemObj">
          <el-form-item :label-width="formLabelWidth"
                        label="图标">
            <el-upload class="avatar-uploader"
                       :action="imageUploadUrl"
                       :show-file-list="false"
                       :on-success="itemHandleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
              <img v-if="editItemObj.imageUrl"
                   :src="editItemObj.imageUrl"
                   width="200px"
                   height="100px"
                   class="avatar">
              <i v-else
                 class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="名称">
            <el-input v-model="editItemObj.name"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="详情配置">
            <el-select v-model="editItemObj.goodsDetailId">
              <el-option v-for="item in goodsDetailList"
                         :key="item.id"
                         :label="item.detailName"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="价格">
            <el-input v-model="editItemObj.price"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="原价">
            <el-input v-model="editItemObj.originalPrice"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="服务配置">
            <el-select v-model="editItemObj.goodsServiceConfigId"
                       clearable>
              <el-option v-for="item in goodsServiceConfigList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="商品数量">
            <el-input v-model="editItemObj.goodsNum"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="排序号">
            <el-input v-model="editItemObj.sortNum"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="详情">
            <el-input v-model="editItemObj.content"
                      type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="itemFormVisible = false">关闭</el-button>
          <el-button @click="saveItemData">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'

  export default {
    name: "goodsList",
    data () {
      return {
        searchCondition: '',
        formLabelWidth: '120px',
        imageUploadUrl: this.api.hospitalManager.uploadImg,
        uploadVideoUrl: this.api.file.upload,
        dataList: [],
        dialogFormVisible: false,
        detailFormVisible: false,
        itemFormVisible: false,
        loading: false,
        hideUpload: true,
        selectFactoryId: null,
        factoryList: [],
        factoryBrandList: [],
        photoList: [],
        imageList: [],
        majorList: [
          {
            id: 0,
            name: "未推荐"
          },
          {
            id: 1,
            name: "已推荐"
          }
        ],
        domesticList: [
          {
            id: 1,
            name: "国产"
          },
          {
            id: 2,
            name: "进口"
          }
        ],
        totals: 0,
        goodsObj: {
          headPortrait: [], // 传给后端
          majorStatus: 0,
          dialogVisible: false,
          isInvitationCode: 0, // 健康服务号
        },
        goodsDetailList: [],
        goodsServiceConfigList: [],
        goodsItemlList: [],
        goodsDetail: {},
        editItemObj: {},
        formCustom: {
          headPortrait: [] // 传给后端
        },
        parameterList: [],
        goodsId: null,
        videoFlag: false,
        // 是否显示进度条
        videoUploadPercent: '',
        // 进度条的进度，
        isShowUploadVideo: false,
        // 显示上传按钮
        videoForm: {
          videoFileUrl: '',
        },
      }
    },
    created () {
      this.initTable();
      this.initFactoryList();
      this.goodsServiceConfig();
    },
    methods: {
      query () {
        this.page.pageIndex = 0;
        this.initTable();
      },
      initTable () {
        let param = {
          name: this.searchCondition,
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageIndex
        };
        this.post(this.api.goods.getGoodsPageApp, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          }
        });
      },
      initFactoryList (name) {
        let param = {
          name: name,
          pageIndex: 0,
          pageSize: 50
        }
        this.post(this.api.factory.getFactoryList, param).then((res) => {
          if (res.data.code === '200') {
            this.factoryList = res.data.object;
          }
        });
      },
      initFactoryBand (factoryId) {
        let param = {
          factoryId: factoryId,
          pageIndex: 0,
          pageSize: 50
        }
        this.post(this.api.factoryBrand.getPageApp, param).then((res) => {
          if (res.data.code === '200') {
            this.factoryBrandList = res.data.object;
          }
        });
      },
      edit (row) {
        this.dialogFormVisible = true;
        this.imageList = [];
        let currRow = row ? row.id : '';
        if (currRow) {
          this.post(this.api.goods.getGoods, { id: row.id }).then((res) => {
            if (res.data.code === '200') {
              this.goodsObj = res.data.object;
              this.goodsObj.headPortrait = [];
              let imageUrl = res.data.object.imageList;
              if (imageUrl) {
                let imageArr = imageUrl.split(",")
                for (let i = 0; i < imageArr.length; i++) {
                  let imgUrl = imageArr[i];
                  if (imgUrl && imgUrl != '') {
                    this.goodsObj.headPortrait.push(imgUrl);
                    this.imageList.push({
                      url: imgUrl
                    });
                  }
                }
              }
            }
          });
        } else {
          this.goodsObj = {
            headPortrait: [],//传给后端
            majorStatus: 0,
            dialogVisible: false
          }
        }
      },
      editItem (id) {
        this.goodsId = id;
        this.editItemObj = {};
        this.post(this.api.goods.getGoodsItemByGoodsId, { goodsId: id }).then((res) => {
          if (res.data.code === '200') {
            this.goodsItemlList = res.data.object;
            this.initParamList();
          }
        });
        this.itemFormVisible = true;
      },
      // 删除规格
      deleteItemDetail (id) {
        this.$confirm('确认删除？')
          .then(_ => {
            this.post(this.api.goods.delGoodsItem, { id: id }).then((res) => {
              if (res.data.code === '200') {
                this.editItem(this.goodsId);
              }
            });
          })
          .catch(_ => { });

      },
      editItemDetail (row) {
        this.editItemObj = row;
      },
      saveItemData () {
        this.editItemObj.goodsId = this.goodsId;
        this.post(this.api.goods.saveGoodsItem, this.editItemObj).then((res) => {
          if (res.data.code === '200') {
            this.editItem(this.goodsId);
          }
        });
      },
      editParameter (id) {
        this.detailFormVisible = true;
        if (id) {
          this.goodsId = id;
          this.formCustom = {
            headPortrait: []
          }
          this.photoList = [];
          this.parameterList = [];
          this.goodsDetail = {};
          this.initParamList();
        }
      },
      // 查询规格
      initParamList () {
        this.post(this.api.goodsDetail.getGoodsDetailList, { goodsId: this.goodsId }).then((res) => {
          if (res.data.code === '200') {
            let list = res.data.object;
            for (let i = 0; i < list.length; i++) {
              let obj = list[i];
              let imageUrl = obj.detailImageUrl;
              if (imageUrl) {
                let imageArr = imageUrl.split(",");
                if (imageArr && imageArr.length > 0) {
                  obj.viewImage = imageArr[0];
                }
              }
            }
            this.goodsDetailList = res.data.object;
          }
        });
      },
      goodsServiceConfig () {
        this.post(this.api.goodsServiceConfig.getGoodsServiceConfigList, { pageIndex: 0, pageSize: 50 }).then((res) => {
          if (res.data.code === '200') {
            this.goodsServiceConfigList = res.data.object;
          }
        });
      },
      addParameter () {
        this.parameterList.push({ id: this.generateUUID(), name: "", content: "" })
      },
      editDetail (row) {
        this.goodsDetail = row;
        this.photoList=[]
        let detailImageUrl = this.goodsDetail.detailImageUrl;
        if (detailImageUrl) {
          let imageArr = detailImageUrl.split(",")
          for (let i = 0; i < imageArr.length; i++) {
            let imgUrl = imageArr[i];
            if (imgUrl && imgUrl != '') {
              this.formCustom.headPortrait.push(imgUrl);
              this.photoList.push({
                url: imgUrl
              });
            }
          }
        }
        let introduce = this.goodsDetail.introduce;
        this.parameterList = JSON.parse(introduce);
      },
      deleteDetail (id) {
        this.$confirm('确认删除？')
          .then(_ => {
            this.post(this.api.goodsDetail.deleteGoodsDetail, { id: id }).then((res) => {
              if (res.data.code === '200') {
                for (let i = 0; i < this.goodsDetailList.length; i++) {
                  if (this.goodsDetailList[i].id === id) {
                    this.goodsDetailList.splice(i, 1);
                    break;
                  }
                }
                this.$message.success('删除成功!');
              }
            });
          })
          .catch(_ => { });
      },
      saveDetailData () {
        let detailImageUrl = "";
        if (!this.formCustom.headPortrait || this.formCustom.headPortrait.length == 0) {
          this.$Message.error("图片不能为空");
          return;
        }
        for (let i = 0; i < this.formCustom.headPortrait.length; i++) {
          detailImageUrl += this.formCustom.headPortrait[i] + ",";
        }
        this.goodsDetail.detailImageUrl = detailImageUrl;
        for (let i = 0; i < this.parameterList.length; i++) {
          let param = this.parameterList[i];
          if (!param.name || param.name == "") {
            this.$Message.error("参数名称为空");
            return;
          }
          if (!param.content || param.content == "") {
            this.$Message.error("参数内容为空");
            return;
          }
        }
        this.goodsDetail.introduce = JSON.stringify(this.parameterList);
        this.goodsDetail.goodsId = this.goodsId;
        this.post(this.api.goodsDetail.uploadGoodsDetail, this.goodsDetail).then((res) => {
          if (res.data.code === '200') {
            this.formCustom = {
              headPortrait: []
            };
            this.photoList = [];
            this.parameterList = [];
            this.goodsDetail = {};
            this.initParamList();
            this.$Message.info(res.data.message);
          }
        });
      },
      deleteParameter (id) {
        for (let i = 0; i < this.parameterList.length; i++) {
          if (this.parameterList[i].id === id) {
            this.parameterList.splice(i, 1);
            break;
          }
        }
      },
      deleteData (id) {
        this.$confirm('确认删除？')
          .then(_ => {
            this.post(this.api.goods.deleteGoods, { id: id }).then((res) => {
              if (res.data.code === '200') {
                this.$message.success('删除成功!');
                this.initTable();
              }
            });
          })
          .catch(_ => { });
      },
      saveData () {
        let headPortrait = this.goodsObj.headPortrait;
        if (!headPortrait || headPortrait.length < 1) {
          this.$Message.error("图标不能为空！");
          return;
        }
        let imageList = "";
        for (let i = 0; i < headPortrait.length; i++) {
          let image = headPortrait[i];
          if (image && image != '') {
            imageList += image + ",";
          }
        }
        this.goodsObj.imageList = imageList;
        this.goodsObj.way = 1
        this.post(this.api.goods.saveGoods, this.goodsObj).then((res) => {
          if (res.data.code === '200') {
            this.initTable();
            this.dialogFormVisible = false;
            this.goodsObj = { majorStatus: 0 };
          }
        });
      }
      ,
      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
      },
      handleAvatarSuccess1 (res) {
        this.goodsObj.imageUrl = res.data;
      }
      ,
      handleAvatarSuccess (res) {
        this.goodsObj.headPortrait.push(res.data);
      },
      itemHandleAvatarSuccess (res) {
        this.editItemObj.imageUrl = res.data;
      },
      detailHandleAvatarSuccess (res) {
        this.formCustom.headPortrait.push(res.data);
      },
      // 删除商品图列表
      handleRemove1 (file, fileList) { // 移除
        for (let i = 0; i < fileList.length; i++) {
          let f = fileList[i];
          if (file.url === f.url) {
            this.imageList.splice(i, 1);
            break;
          }
        }
        for (let i = 0; i < this.goodsObj.headPortrait.length; i++) {
          if (file.url === this.goodsObj.headPortrait[i]) {
            this.goodsObj.headPortrait.splice(i, 1);
            break;
          }
        }
      },
      handleRemove (file, fileList) { // 移除
        for (let i = 0; i < fileList.length; i++) {
          let f = fileList[i];
          if (file.url === f.url) {
            this.fileList.splice(i, 1);
            break;
          }
        }
        for (let i = 0; i < this.formCustom.headPortrait.length; i++) {
          if (file.url === this.formCustom.headPortrait[i]) {
            this.formCustom.headPortrait.splice(i, 1);
            break;
          }
        }
      },
      handleChange () {
        // 当图片大于8张 隐藏上传按钮
        if (this.formCustom.headPortrait.length >= 8) {
          this.hideUpload = true;
        }
      },

      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      // 上传前回调
      beforeUploadVideo (file) {
        var fileSize = file.size / 1024 / 1024 < 100;
        if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
          this.$message.error("请上传正确的视频格式");
          return false;
        }
        if (!fileSize) {
          this.$message.danger("视频大小不能超过100MB");
          return false;
        }
        this.isShowUploadVideo = false;
      },
      // 上传成功回调
      uploadSuccess (response, file, fileList) {
        if (response.code === '200') {
          // 状态码为200时则上传成功
          this.isShowUploadVideo = true;
          this.videoFlag = false;
          this.videoUploadPercent = 0;
          this.goodsObj.introduceVideoUrl = file.response.object[0]
          this.$message.success('视频上传成功');
        } else {
          this.$message.error(response.message);
          // 状态码不是200时上传失败 从列表中删除
          fileList.splice(fileList.indexOf(file), 1);
        }
      },
      //进度条
      uploadVideoProcess (event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = Math.floor(event.percent)
      },
      generateUUID () {
        let d = new Date().getTime();
        if (window.performance && typeof window.performance.now === "function") {
          d += performance.now();
        }
        let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          let r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
      }
      ,
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    }
    ,
    components: {
      Page,
    }
  }
</script>

<style scoped lang="scss">
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
